@import './variables.less';
@import '../../style/mixins.less';

.fnx-stepper {
	display: inline-block;
	user-select: none;

	&__minus,
	&__plus {
		position: relative;
		box-sizing: border-box;
		width: var(--fnx-stepper-input-height);
		height: var(--fnx-stepper-input-height);
		margin: 0;
		padding: 0;
		color: var(--fnx-stepper-button-icon-color);
		vertical-align: middle;
		background-color: var(--fnx-stepper-background-color);
		border: 0;
		cursor: pointer;

		&::before {
			width: 50%;
			height: 1px;
		}

		&::after {
			width: 1px;
			height: 50%;
		}

		&::before,
		&::after {
			position: absolute;
			top: 50%;
			left: 50%;
			background-color: currentColor;
			transform: translate(-50%, -50%);
			content: '';
		}

		&:active {
			background-color: var(--fnx-stepper-active-color);
		}

		&--hidden {
			display: none;
		}

		&--disabled {
			color: var(--fnx-stepper-button-disabled-icon-color);
			background-color: var(--fnx-stepper-button-disabled-color);
			cursor: not-allowed;

			&:active {
				background-color: var(--fnx-stepper-button-disabled-color);
			}
		}
	}

	&__minus {
		border-radius: var(--fnx-stepper-border-radius) 0 0
			var(--fnx-stepper-border-radius);

		&::after {
			display: none;
		}
	}

	&__plus {
		border-radius: 0 var(--fnx-stepper-border-radius)
			var(--fnx-stepper-border-radius) 0;
	}

	&__input {
		box-sizing: border-box;
		width: var(--fnx-stepper-input-width);
		height: var(--fnx-stepper-input-height);
		margin: 0 2px;
		padding: 0;
		color: var(--fnx-stepper-input-text-color);
		font-size: var(--fnx-stepper-input-font-size);
		line-height: var(--fnx-stepper-input-line-height);
		text-align: center;
		vertical-align: middle;
		background-color: var(--fnx-stepper-background-color);
		border: 0;
		border-width: 1px 0;
		border-radius: 0;
		-webkit-appearance: none;

		&:disabled {
			color: var(--fnx-stepper-input-disabled-text-color);
			background-color: var(
				--fnx-stepper-input-disabled-background-color
			);
			-webkit-text-fill-color: currentColor; // fix disabled color in iOS
			opacity: 1;
		}

		&:read-only {
			cursor: default;
		}

		&--hidden {
			display: none;
		}
	}
}
